<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloVue</title>
</head>
<body>
<!--声明一个页面容器-->
<div id="app">
    用户名:{{username}} <br>
    性别:<span v-text="sex"></span><br>
    性别:<span v-text="sex=='男'?'汉子':'妹子'"></span><br>
    备注:{{remark}}<br>
    备注:<span v-html="remark"></span>

    <input type="button" value="点我" @click="clickMe(1)" >
</div>
</body>
<script src="../js/vue.js"></script>

<script>
    //创建一个Vue实例
    let vue=new Vue({
        //指定个vue实例和页面的哪个容器关联
        el: "#app",
        data:{
            username:'小明',
            age:22,
            sex:'男',
            remark:'<font color=red>一个牛B的男人</font>'
        },
        methods:{
            // clickMe(id){
            //     alert(id)
            // }
            clickMe:function (id) {
                alert(id)
            }
        }
    })

</script>
</html>
